<!--
 * @Author: boyyang
 * @Date: 2022-01-16 11:31:31
 * @LastEditTime: 2022-01-26 16:14:46
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\components\fullScreenLoading\loadingItem.vue
-->

<template>
    <div class="loading-wrapper" v-if="props.isShow">
        <div class="loading-content">
            <span
                v-for="(item, i) in props.text as any"
                :key="i"
                class="loading-text"
                :style="{ '--i': i, '--angele': Math.floor(360 / props.text.length)}"
            >{{ item }}</span>
        </div>
    </div>
</template>

<script lang="ts" setup>

interface ILoadingProps {
    text?: string;
    isShow?: boolean;
}

const props = withDefaults(defineProps<ILoadingProps>(), {
    text: 'LOADING~~~',
    isShow: false
})

</script>

<style scoped lang="scss">
.loading-wrapper {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;

    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    top: 0;
    left: 0;

    transform-style: preserve-3d;
    perspective: 2000px;

    transform-origin: center;

    .loading-content {
        text-align: center;
        transform-style: preserve-3d;
        animation: trans 3s linear infinite;

        @keyframes trans {
            0% {
                transform: rotateY(360deg);
            }

            100% {
                transform: rotateY(0deg);
            }
        }
    }
    .loading-text {
        box-sizing: border-box;
        border-radius: 5px;
        padding: 2px 5px;

        font-family: "Times New Roman", Times, serif;
        font-size: 35px;
        font-weight: 700;
        color: whitesmoke;
        margin: 0 20px;

        display: flex;
        justify-content: center;
        align-items: center;

        position: absolute;
        top: 0;
        left: 0;

        text-align: center;

        text-shadow: 0 0 4px rgba(23, 163, 151, 1),
            0 0 8px rgba(23, 163, 151, 1), 0 0 16px rgba(23, 163, 151, 1),
            0 0 24px rgba(23, 163, 151, 1);

        transform: rotateY(calc(var(--i) * var(--angele) * 1deg))
            translateX(-100px) rotateY(-90deg);
    }
}
</style>
